<template>
  <div>
    <button @click="toggle">切换</button>
    <keep-alive include="userName" >
    <component :is="name"></component>
    </keep-alive>
  </div>
</template>
// 01-组件缓存-component-keep-alive
<script>
import userName from "@/components//userName.vue"
import userInfo from "@/components//userInfo.vue"
export default {
  data(){
    return{
    name:"userName"
    }
  },
  components:{
    userName,
    userInfo
  },
  methods:{
    toggle(){
      if(this.name=="userName"){
        this.name="userInfo"
      }else{
        this.name="userName"
      }
    }
  },
  created(){
    console.log('userName被创建了')
  },

}
</script>

<style>

</style>